<template>
    <div class="wrapper-shop">
        <div class="wrapper-first-img">
            <img src="https://oss.xiaoniaoai.com/bg-dh.png" alt="">
            <div class="wrapper-infos">
            <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
           
            <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone" id="phone"  :state="stat"></mt-field>
          
            <mt-field label="地址" placeholder="请输入地址"   v-model="address"></mt-field>
            
            <mt-button type="danger" class="danger" @click= "gonextsd" style="margin-top:.3rem">提交</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios"
import Vue from 'vue'
import { Field , Button,Toast } from 'mint-ui'
Vue.component(Field.name, Field);
Vue.component(Button.name, Button);
export default {
    props: ['shopcar'],
    name: 'shopcar',
    data () {
        return {
          username:'',
          phone:'',
          address:'',
          id: localStorage.getItem('user_id'),
          uid: localStorage.getItem('user_uid'),
          stat:''
        }
    },
    methods :{
     changeCount:function(){
           let flag = false;
           var phone = this.phone;
           console.log(phone)
                if(!(/^1\d{10}$/.test(phone))){ 
                   Toast({
                                message: '请输入正确的手机号',
                                position: 'middle',
                                duration: 1000
                            })  
                              this.stat = 'error' 
                } else{
                    this.stat = 'success' 
                     if(this.username == '' || this.phone == '' || this.address == ''){
                            Toast({
                                message: '请完善您的信息',
                                position: 'middle',
                                duration: 1000
                            })   
            }else{
               this.$emit('closeMain',flag);
                localStorage.setItem('usernames',this.username)
              localStorage.setItem('mobiles',this.phone)
                localStorage.setItem('address',this.address)
            
         
                }
                }
        },
         gonextsd(){
          
            this.changeCount()
                    
                     
          
      
         }
    },
   
     mounted(){
       this.WXConfig.wxShowMenu(); 
       
   }
}
</script>
<style scoped>
.danger{
    width: 50%;
    margin-left: 25%;
   background: #fdc600
   
}
.wrapper-shop{
    width: 100%;
    height: auto;
    overflow-y: hidden
}
.wrapper-first-img{
    width: 100%;
    height: 100%;
    position: absolute;
   
}
.wrapper-first-img >img {
    width: 100%;
    height: 100%;
    position: relative;
    left: 0;
    top: 0
}
.wrapper-infos{
    width: 100%;
    height: auto;
    position: absolute;;
    left: 0;
    top: 49%
}
.mint-cell-value > .mint-field-core {
    font-size:.22rem
}
</style>


